<template>
  <TableForm
    v-model:loading="loading"
    :columns="columns"
    :form-columns="formColumns"
    :data="tableData"
    :total="tableTotal"
    :pagination="pagination"
    @open-form="onOpenForm"
    @fetch="onFetch">
    <template v-slot:column>
      <el-table-column
        v-for="(column, index) in columns"
        :key="index"
        :type="column.type"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :show-overflow-tooltip="column.showOverflowTooltip">
        <template v-if="column.prop === 'status'" #default="{ row }">
          <el-tag type="success" v-if="row.status">启用</el-tag>
          <el-tag type="info" v-else>禁用</el-tag>
        </template>
        <template v-else-if="column.prop === 'action'" #default="{ row, $index }">
          <el-button
            :disabled="row.roleSign === 'admin'"
            size="small"
            text
            type="primary"
            @click="onOpenForm('edit', row)">
            修改
          </el-button>
          <el-button
            :disabled="row.roleSign === 'admin'"
            size="small"
            text
            type="danger"
            @click="onDelRow(row, $index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </template>
  </TableForm>
  <!--组件-->
  <RoleDialog ref="roleDialogRef" @refresh="onFetch()" />
</template>

<script setup lang="ts" name="systemRole">
import { ref, defineAsyncComponent, onMounted } from 'vue'
import TableForm from '@/components/TableForm/TableForm.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 引入组件
const RoleDialog = defineAsyncComponent(() => import('@/views/system/role/RoleDialog.vue'))

// 编辑
const roleDialogRef = ref()
// 加载
const loading = ref(false)
// 表格数据
const tableData = ref<any[]>([])
// 表格总数
const tableTotal = ref(0)
// 筛选列
const formColumns = ref<FormColumn[]>([
  {
    type: 'string',
    label: '输入框',
    prop: 'roleName',
    props: { placeholder: '请输入' }
  },
  {
    type: 'boolean',
    label: '是否是开启状态',
    prop: 'status',
    props: {
      inlinePrompt: true,
      activeText: '开启',
      inactiveText: '关闭'
    }
  },
  {
    type: 'select',
    label: '下拉框多选',
    prop: 'select1',
    multiple: true,
    props: {
      multiple: true,
      style: 'width: 100%',
      placeholder: '请选择',
      clearable: true,
      filterable: true,
      options: [
        { value: 0, label: 'admin' },
        { value: 1, label: 'common' }
      ],
    }
  },
  {
    type: 'select',
    label: '下拉框单选',
    prop: 'select2',
    props: {
      placeholder: '请选择',
      style: 'width: 100%',
      clearable: true,
      filterable: true,
      options: [
        { value: 0, label: 'admin' },
        { value: 1, label: 'common' }
      ],
    }
  },
  {
    type: 'date',
    label: '日期',
    prop: 'createTime',
    props: {
      placeholder: '开始时间',
      style: 'width: 100%',
      clearable: true
    }
  },
  {
    type: 'daterange',
    label: '范围',
    prop: 'updateTime',
    props: {
      startPlaceholder: '开始时间',
      endPlaceholder: '结束时间',
      style: 'width: 100%',
      clearable: true
    }
  },
  {
    type: 'datetime',
    label: '时间',
    prop: 'dateTime',
    props: {
      placeholder: '选择时间',
      style: 'width: 100%'
    }
  },
  {
    type: 'radio',
    label: '单选框',
    prop: 'role',
    multiple: true,
    props: {
      placeholder: '选择时间',
      style: 'width: 100%',
      options: [
        { value: 0, label: 'admin' },
        { value: 1, label: 'common' }
      ],
    }
  }
])
// 表格列
const columns = ref<TableFormColumn[]>([
  { type: 'selection', label: '', width: 38 },
  { type: 'index', label: '#', width: 50 },
  { prop: 'roleName', label: '角色名称', showOverflowTooltip: true },
  { prop: 'roleSign', label: '角色标识', showOverflowTooltip: true },
  { prop: 'status', label: '角色状态', showOverflowTooltip: true },
  { prop: 'describe', label: '角色描述', showOverflowTooltip: true },
  { prop: 'createTime', label: '创建时间', showOverflowTooltip: true },
  { prop: 'action', label: '操作', width: 100 }
])
// 分页
const pagination = ref<TableFormPagination>({
  page: 1,
  pageSize: 10
})

/**
 * 初始化表格数据
 * @param params
 */
const onFetch = (params?: any) => {
  params && console.log('onFetch', params)
  loading.value = true
  const data = []
  for (let i = 0; i < 20; i++) {
    data.push({
      roleName: i === 0 ? '超级管理员' : '普通用户',
      roleSign: i === 0 ? 'admin' : 'common',
      describe: `测试角色${i + 1}`,
      sort: i,
      status: true,
      createTime: new Date().toLocaleString()
    })
  }
  tableData.value = data
  tableTotal.value = data.length
  setTimeout(() => {
    loading.value = false
  }, 500)
}

/**
 * 打开表单
 * @param type
 * @param row
 */
const onOpenForm = (type: string, row?: any) => {
  roleDialogRef.value && roleDialogRef.value.openDialog(type, row)
}

/**
 * 删除角色
 * @param row
 * @param index
 */
const onDelRow = (row: RowRoleType, index: number) => {
  ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      tableData.value.splice(index, 1)
      // onFetch()
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}
// 页面加载时
onMounted(() => {
  onFetch()
})
</script>
